<template>
  <div class="article">
    <!-- 头部 -->
    <van-nav-bar
      title="文章详情"
      fixed
      placeholder
      left-arrow
      @click-left="$router.push('/')"
    />
    {{ $store.query }}

    <div class="container">
      <div class="article-content" ref="articleContent">
        <!-- 计算高度 -->
        <div class="contentHigh" ref="contentHigh">
          <h1 class="title">{{ title }}</h1>

          <!-- 骨架屏 -->
          <van-skeleton title avatar :row="3" :loading="!article._id">
            <van-cell center class="user-info">
              <div slot="title" class="name">{{ article.author }}</div>
              <van-image
                slot="icon"
                class="avatar"
                round
                fit="cover"
                :src="article.avatar"
              />
              <div slot="label" class="pubdate">
                {{ article.time | formatterDate }}
              </div>
            </van-cell>

            <!-- 内容 -->
            <div class="markdown-body" v-html="article.content"></div>
          </van-skeleton>
        </div>

        <!-- 分割线 -->
        <van-divider
          :hairline="false"
          :style="{
            color: '#999',
            borderColor: '#999',
            padding: '0 16px',
          }"
        >
        </van-divider>

        <div class="comment_list_head">精彩评论</div>

        <!-- 文章评论列表 -->
        <div style="min-height: calc(100vh -100px)">
          <van-list
            v-model="comment_loading"
            :finished="comment_finished"
            finished-text="没有更多了"
            @load="getCommentList"
          >
            <van-cell
              class="comment-item"
              v-for="(item, index) in commentList"
              :key="item._id"
            >
              <van-image
                slot="icon"
                class="avatar"
                round
                fit="cover"
                :src="item.info.avatar"
              />
              <div slot="title">
                <div class="title-w">
                  <div class="name">{{ item.info.nickname }}</div>

                  <!-- 评论点赞 -->
                  <div
                    class="like-w"
                    @click="likeComment(item._id, index, item.is_like)"
                  >
                    <van-icon
                      class="like-icon"
                      :class="{ liked: item.is_like }"
                      name="good-job"
                    />
                    <span class="like-count">{{
                      item.like_count == 0 ? "" : item.like_count
                    }}</span>
                  </div>
                </div>
                <div class="content">{{ item.content }}</div>
                <div class="info">
                  <span class="pubdate">{{
                    item.create_time | formatterDate
                  }}</span>

                  <van-button
                    class="reply-btn"
                    round
                    size="mini"
                    @click="openReply(item, index)"
                    >{{
                      item.reply_num == 0 ? "" : item.reply_num
                    }}回复</van-button
                  >
                </div>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>

    <!-- /发布评论 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="openRemarks"
        >写评论</van-button
      >

      <!-- 评论角标 -->
      <van-icon
        name="comment-o"
        color="#777"
        v-if="!article.comment || article.comment == 0"
      />
      <van-icon name="comment-o" color="#777" :badge="article.comment" v-else />

      <!-- 收藏 -->

      <van-icon
        name="star"
        :color="article.is_fav ? '#f00' : '#777'"
        @click="favorites"
      />

      <!-- 点赞 -->

      <van-icon
        name="good-job"
        :color="article.is_like ? '#f00' : '#777'"
        @click="iflike"
      />

      <!-- 发送 -->
      <van-icon
        name="share"
        @click="showShare = true"
        color="#777777"
      ></van-icon>
    </div>

    <!-- 评论回复 -->

    <van-popup v-model="remarks" position="bottom">
      <div class="post-comment">
        <van-field
          v-model="content"
          rows="4"
          autosize
          type="textarea"
          maxlength="1000"
          :placeholder="contentPlaceholder"
          show-word-limit
          ref="content"
        />
        <div style="width: 100%">
          <van-button size="large" type="primary" @click="addComment"
            >发布</van-button
          >
        </div>
      </div>
    </van-popup>

    <!-- 二级评论回复 -->

    <van-popup
      v-model="replyRemarks"
      round
      position="bottom"
      style="height: 100%"
    >
      <replyComponent
        @close="replyRemarks = false"
        @likeComment="likeComment"
        :active_reply_index="active_reply_index"
        :article_id="article_id"
        :replayItemInfo="commentList[active_reply_index]"
      >
      </replyComponent>

      <!-- /发布评论 -->

      <div class="article-bottom">
        <van-button
          class="comment-btn"
          type="default"
          round
          size="small"
          @click="
            openReply(commentList[active_reply_index], active_reply_index, true)
          "
          >写评论</van-button
        >
      </div>
    </van-popup>

    <!-- 发送/分享 -->

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />

    <!-- 二维码/微信--二维码弹出层 -->
    <van-popup v-model="qrcodePopup" round position="center" z-index="99">
      <van-image :src="qrcodeurl" > </van-image>
      <button><a :href="qrcodeurl" download>下载</a></button>
    </van-popup>
  </div>
</template>

<script>
import article from "./article";
export default article;
</script>

<style scoped lang="less">
.comment_list_head {
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}
.article-content {
  height: calc(100vh - 85px);
  overflow-y: auto;
  padding-bottom: 44px;
  .title {
    font-size: 20px;
    color: #3a3a3a;
    padding: 24px 20px 18px;
    background-color: #fff;
    margin: 0;
  }
}

.user-info {
  .avatar {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }
  .name {
    font-size: 12px;
    color: #333333;
  }
  .pubdate {
    font-size: 11px;
    color: #b4b4b4;
  }
  .follow-btn {
    width: 85px;
    height: 29px;
  }
}

ul {
  list-style: unset;
}

.markdown-body {
  padding: 14px;
  background-color: #fff;
}

.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 141px;
    height: 23px;
    border: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
  .van-icon {
    font-size: 20px;
    .van-info {
      font-size: 11px;
      background-color: #e22829;
    }
  }
}
.comment-item {
  .avatar {
    width: 36px;
    height: 36px;
    margin-right: 13px;
  }
  .name {
    font-size: 16px;
    color: #555;
  }
  .content {
    font-size: 16px;
    color: #222222;
    margin: 10px 0;
  }
  .info {
    display: flex;
    height: 36px;
    align-items: center;
  }
  .pubdate {
    font-size: 12px;
    margin-right: 12px;
  }
  .title-w {
    display: flex;
    justify-content: space-between;
    height: 36px;
    align-items: center;
  }
  .like-w {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .like-icon.liked {
    color: #ef092c;
  }
}

.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 200px;
    height: 30px;
    border: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
}

.post-comment {
  padding: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
